<template>
	<view class="body" :style="{'height': `${windowHeight}px`, 'width': `${windowWidth}px`}">
		<video :src="src" :show-loading="false" :controls="false" :show-center-play-btn="false"
		 :show-play-btn="false" :style="{'height': `${windowHeight}px`, 'width': `${windowWidth}px`}" :enable-progress-gesture="false" @tap="clickVideo" :id="`video_${videoId}`" @timeupdate="timeupdate" @play="_playEvent"></video>
		<cover-image v-if="!isPlay" class="cover-img" :style="{'height': `${windowHeight}px`, 'width': `${windowWidth}px`}"
		 :src="img" mode="aspectFit"></cover-image>
		<!-- <cover-view class="progressBar" :style="{ width: barWidth }"></cover-view> -->
		<v-slider class="progress" v-model="sliderValue" :is-start="isPause" @change="_sliderChange" @changing="_sliderChanging" />
	</view>
</template>

<script>
	const modal = weex.requireModule('modal')
	import api from '@/api/index.js';

	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},
			width: {
				type: Number,
				default: 750
			},
			gDuration: {
				type: Number,
				default: 999
			}, //大概时长使进度条更准确
			img: {
				type: String,
				default: ''
			}, //大概时长使进度条更准确
			videoId: {
				type: Number,
				default: 0
			},
			videoData: {
				type: Object,
				default: null
			},
			videoConfig: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				sysheight: 0,
				time: 0,
				duration: 0,
				playFirst: true,
				isPlay: false,
				videoCtx: null,
				windowWidth: 0,
				windowHeight: 0,
				detail: {
					currentTime: 0,
					duration: 0
				},
				sliderValue: 0,
				isPause: false
			}
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync()
				this.windowWidth = res.windowWidth
				this.windowHeight = res.windowHeight
			} catch (e) {
				// error
			}
			this.$nextTick(() => {
				this.sysheight = uni.getSystemInfoSync().windowHeight
				this.videoCtx = uni.createVideoContext(`video_${this.videoId}`, this)
				setTimeout(() => {
					if (this.videoData.need_gold && this.videoData.is_buy === 0) {
						modal.confirm({
							message: `观看完整视频需支付 ${this.videoData.need_gold} 金币，是否观看？`,
							okTitle: '观看',
							cancelTitle: '否'
						}, (value) => {
							if (value === '观看') {
								api.videoBuy({
									'vid': this.videoData.id
								}).then(res => {
									modal.toast({
										message: res.data.msg,
										duration: 0.6
									})
									if (res.data.code === 0) {
										this.videoData.is_buy = 1
										this.videoCtx.play()
									}
								})
							}
						})
					} else {
						this.videoCtx.play()
					}
				}, 100)
			})
		},
		onUnload() {
			this.videoCtx.stop();
			uni.$off('videoCreated');
		},
		methods: {
			timeupdate(event) {
				this.$emit('timeupdate', {
					e: event,
					video: this.videoCtx
				})
				this.time = event.detail.currentTime
				this.duration = event.detail.duration
				
				this.detail = event.detail
				this.sliderValue = this.detail.currentTime / this.detail.duration * 100
			},
			clickVideo(e) {
				this.$emit('click', e)
			},
			_pause() {
				this.videoCtx.pause()
				this.isPause = true
			},
			_playEvent() {
				this.isPlay = true
				this.$emit('play', this.videoCtx)
			},
			seek(value) {
				if (this.videoCtx) {
					this.videoCtx.seek(value)
					this.videoCtx.play()
					this.isPause = false
				}
			},
			_sliderChange({
				value
			}) {
				this.seek(value / 100 * this.detail.duration)
			},
			_sliderChanging() {
				if(this.videoCtx) {
					this.videoCtx.pause()
				}
			}
		},
		computed: {
			barWidth() {
				let width = this.time / this.duration * this.width
				return `${width}px`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.progress {
		position: absolute;
		right: 0;
		bottom: 106rpx;
		left: 0;
	}

	.body {
		position: relative;
	}

	.progressBar {
		border-radius: 2rpx;
		height: 4rpx;
		background-color: #FFFFFF;
		z-index: 999999;
		position: absolute;
		bottom: 99rpx;
	}

	.cover-img {
		position: absolute;
	}

	//#ifndef APP-PLUS-NVUE
	@keyframes flicker {
		0% {
			box-shadow: 0 0 0 #FFFFFF;
		}

		/** 暂停效果 */
		10% {
			box-shadow: 0 0 2rpx #FFFFFF;
		}

		50% {
			box-shadow: 0 0 10rpx #FFFFFF;
		}

		60% {
			box-shadow: 0 0 12rpx #FFFFFF;
		}

		90% {
			box-shadow: 0 0 18rpx #FFFFFF;
		}

		100% {
			box-shadow: 0 0 20rpx #FFFFFF;
		}

	}

	//#endif
</style>
